<template>
  <a-row :gutter="10" style="margin-top: 10px">
    <a-form :layout="formLayout" labelAlign="left" :form="searchForm" @submit="handleSubmit">
      <a-col :span="8">
        <a-form-item label="题目标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-decorator="['title']"
            placeholder="请输入题目标题"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="题目类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            allowClear
            show-search
            v-decorator="['qt_type']"
            placeholder="请选择题目类型"
          >
            <a-select-option :value="1">判断题</a-select-option>
            <a-select-option :value="2">单选题</a-select-option>
            <a-select-option :value="3">多选题</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-button style="margin-right: 10px" type="primary" html-type="submit" icon="search">搜索</a-button>
          <a-button @click="handleReset">重置表单</a-button>
        </a-form-item>
      </a-col>
    </a-form>
  </a-row>
</template>
<script>
import { SelectRegion } from '@/components'
import moment from 'moment'

export default {
  name: 'searchForm',
  components: {
    SelectRegion
  },

  data () {
    return {
      yearString: '',
      isopen: false,
      // 日历弹出的状态
      year: moment(),
      // moment格式

      m: new Date().getMonth() + 1,
      searchForm: this.$form.createForm(this),
      queryParam: {},
      formLayout: 'horizontal',
      labelCol: {
        style: 'width: 70px;float:left;margin-right:10px;white-space: nowrap;\n' +
          'text-overflow: ellipsis;\n' +
          '-o-text-overflow: ellipsis;\n' +
          'overflow: hidden;'
      },
      wrapperCol: { style: 'width: calc( 95% - 70px );float:left' }
    }
  },
  methods: {
    handleM (m) {
      this.searchForm.setFieldsValue({ month: m.target.value })
      this.handleRefresh()
    },
    handleRefresh () {
      const values = this.searchForm.getFieldsValue()
      if (this.year && values.month) {
        values.time = this.year.format('YYYY') + '-' + (values.month < 10 ? '0' + values.month : values.month)
      }
      this.$emit('handleSubmit', values)
    },
    handleSubmit (e) {
      e.preventDefault()
      this.handleRefresh()
    },
    handleReset () {
      this.searchForm.resetFields()
    },

    onChange () {
      this.year = null
      this.yearString = ''
    },
    handYearChange (open) {
      if (open) {
        this.isopen = true
      } else {
        this.isopen = false
      }
    },
    panelYearChange (value) {
      this.year = value
      this.yearString = moment(value).format('YYYY')
      this.isopen = false
      this.handleRefresh()

    }
  }
}
</script>
<style scoped lang="less">

</style>
